<template>
  <div class="main">
    <van-sticky z-index="9999">
      <div class="nav">
        <h1>我的</h1>
      </div>
    </van-sticky>

    <div class="head-icon">
      <img
        v-if="item.length != 0"
        src="../../assets/img/head-icon.png"
        alt=""
        srcset=""
      />
      <span v-if="item.length != 0">{{ item }}</span>
      <van-button
        v-if="item.length == 0"
        type="primary"
        size="mini"
        to="/regist"
        >注册</van-button
      >
      <van-button v-if="item.length == 0" type="info" size="mini" to="/login"
        >登录</van-button
      >
      <ul>
        <li @click="collectClick"><van-icon name="like" /><b>我的收藏</b></li>
        <li @click="shopClick"><van-icon name="bag" /><b>我的拼单</b></li>
        <li @click="showShare = true">
          <van-icon name="share" /><b>推荐给好友</b>
        </li>
        <li @click="feedClick">
          <van-icon name="smile-comment" /><b>意见反馈</b>
        </li>
        <li @click="phoneClick"><van-icon name="phone" /><b>手机绑定</b></li>
      </ul>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sticky, Icon, Toast, ShareSheet, Dialog, Button } from "vant";
import { mapActions, mapState } from "vuex";
import { LOADDATA } from "../../store/actionTypes";
Vue.use(Sticky);
Vue.use(Icon);
Vue.use(Toast);
Vue.use(ShareSheet);
Vue.use(Dialog);
Vue.use(Button);
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },

  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },

  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    phoneClick() {
      Dialog.confirm({
        title: "登录授权",
        message: "使用微信已绑定手机号授权",
        confirmButtonText: "确认授权",
        cancelButtonText: "换个号码",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    collectClick() {
      this.$router.push("/mycollect");
    },
    shopClick() {
      this.$router.push("/myteambuying");
    },
    feedClick() {
      this.$router.push("/myfeedback");
    },
  },
  computed: {
    ...mapState("login", {
      item: "item",
    }),
  },
};
</script>

<style lang="stylus" scoped>
.nav
  position sticky
  top 0
  height 0.45rem
  text-align center
  line-height 0.45rem
  background-color white
  h1
    font-size 0.16rem
    font-weight 400
.head-icon
  margin 0.2rem 0.1rem 0
  img
    width 20%
    border 1px
    border-radius 2rem
    margin-right 0.1rem
  span
    font-size 0.16rem
  ul
    display flex
    flex-direction column
    margin-top 0.31rem
    li
      height 0.57rem
      color #444444
      border-bottom 1px solid #ececec
      line-height 0.57rem
      b
        font-weight normal
        font-size 0.16rem
        margin-left 0.1rem
</style>